<template>
  <div class="wrap complain">
    <div class="tab">
      <van-tabs v-model="active">
        <van-tab title="投诉记录"></van-tab>
        <van-tab title="我要投诉"></van-tab>
      </van-tabs>
    </div>
    <!-- 投诉记录 -->
    <div class="complain_list" v-if="active == 0">
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="您暂时还没有投诉记录"
      />
    </div>
    <!-- 我要投诉 -->
    <div class="my_complain" v-else-if="active == 1">
      <van-cell-group>
        <van-field
          v-model="value"
          label="当前房屋"
          placeholder="请输入楼层门牌号等信息"
        />
      </van-cell-group>
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="投诉类型"
        placeholder="请选择投诉类型"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择投诉类型"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="投诉内容"
        type="textarea"
        maxlength="150"
        placeholder="请输投诉内容...（限150字）"
        show-word-limit
      />
      <div class="init_img">
        <p>请上传图片</p>
        <van-uploader v-model="fileList" multiple :max-count="5" />
      </div>
      <van-cell-group>
        <van-field v-model="value2" placeholder="请输入发现问题的具体位置" />
      </van-cell-group>
      <van-button type="danger" block round @click="toHome"
        >立即发送</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  // 定义属性
  name: "Complain",
  data() {
    return {
      active: 0,
      value: "",
      show: false,
      fieldValue: "",
      cascaderValue: "",
      options: [
        {
          text: "环境",
          value: "001",
        },
        {
          text: "安全",
          value: "002",
        },
        {
          text: "秩序",
          value: "003",
        },
        {
          text: "工作人员",
          value: "004",
        },
        {
          text: "供水 供气 供电",
          value: "005",
        },
        {
          text: "设备设施",
          value: "006",
        },
        {
          text: "便民设施",
          value: "007",
        },
        {
          text: "其他",
          value: "008",
        },
      ],
      message: "",
      value2: "",
      fileList: [],
    };
  },
  methods: {
    toHome() {
      if (
        this.value != "" &&
        this.fieldValue != "" &&
        this.message != "" &&
        this.fileList != "" &&
        this.value2 != ""
      ) {
        Toast.success("发送成功");
        setTimeout(() => {
          this.$router.push({ path: "/" });
        }, 1000);
      } else {
        Toast.fail("请输入完整信息");
      }
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    ubmit({ selectedOptions }) {
      this.shows = false;
      this.dataValue = selectedOptions.map((option2) => option2.text).join("/");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.complain {
  .complain_list {
    .custom-image .van-empty__image {
      width: 90px;
      height: 90px;
    }
  }
  .my_complain {
    .init_img {
      padding: 0 16px;
      p {
        font-size: 14px;
        color: #646566;
        margin-bottom: 6px;
      }
    }
    ::v-deep .van-button {
      width: 340px;
      margin: 30px auto;
      background-color: rgb(250, 75, 54);
      border-radius: 6px;
    }
  }
}
</style>